<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<template>
  <view class="overflow-hidden px-4 bg" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <view class="bg-radial"></view>

    <view class="bg-image flex flex-col flex-items-center w-full mt-7rem">
      <img src="@/static/images/大.png" style="width: 15.38rem" alt="" />
      <text class="title">帮帮ing</text>
    </view>

    <text class="copyright">Copyright © 2024 版权所有</text>
    <view class="count-down">
      <wd-count-down
        ref="countDown"
        :time="5000"
        millisecond
        :auto-start="true"
        format="ss"
        @finish="onFinish"
      ></wd-count-down>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'Index',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

onLoad(() => {
  uni.hideTabBar()
})

onMounted(() => {})

const onFinish = () => {
  uni.navigateTo({
    url: '/pages/login/index',
  })
}
</script>

<style>
.bg {
  height: 1624rpx;
  background: rgba(76, 139, 254, 0.56);
}

.bg-radial {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 306px;
  height: 29rem;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(76, 139, 254, 0.8) 0%,
    rgba(148, 183, 248, 0) 70%,
    transparent 100%
  );
  transform: translate(-50%, -50%);
}

.title {
  font-family: ZKKuaiLeTi-bold;
  font-size: 2.38rem;
  line-height: 2.75rem;
  color: rgba(0, 86, 251, 1);
  text-align: center;
}

.copyright {
  position: absolute;
  bottom: 60rpx;
  left: 50%;
  font-family: PingFangSC-regular;
  font-size: 0.75rem;
  font-weight: bold;
  color: rgba(0, 86, 251, 1);
  transform: translateX(-50%);
}

.count-down {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.1rem solid #000;
  border-radius: 50%;
}
</style>
